<template>
  <public-dialog
          ref="publicDialogRef"
          v-bind="$attrs"
        >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
          <el-form-item label="年度/月度" prop="time">
              <el-date-picker
                      v-model="form.time"
                      type="month"
                      size="large"
                      placeholder="请选择"
                      value-format="YYYY-MM"
                      @change="datePickerChange"
              />
          </el-form-item>
          <el-form-item label="收入总金额" prop="income">
              <el-input v-model="form.income" placeholder="输入收入总金额" @input="form.income = limitInputNum(form.income,15,4,true)"></el-input>
          </el-form-item>
          <el-form-item label="成本总金额" prop="cost">
              <el-input v-model="form.cost" placeholder="输入成本总金额" @input="form.cost = limitInputNum(form.cost,15,4,true)"></el-input>
          </el-form-item>
          <el-form-item label="利润总金额" prop="profit">
              <el-input v-model="form.profit"  placeholder="输入利润总金额" @input="form.profit = limitInputNum(form.profit,15,4,true)"></el-input>
          </el-form-item>
        </el-form>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {ElDatePicker, ElForm, ElFormItem} from "element-plus";
import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import {limitInputNum} from "@/common/utils/GlobalUtils";

// 获取实例方法
const instance = getCurrentInstance();
const publicDialogRef = ref(null);
const formRef = ref(null);

onMounted(() => {
// 把el-form方法注入到实例的exposed中
    const entries = Object.entries(publicDialogRef.value.$.exposed)
    for (const [key, value] of entries) {
        instance.exposed[key] = value
    }

    nextTick(()=>{
        const entries2 = Object.entries(formRef.value.$.exposed)
        for (const [key, value] of entries2) {
            instance.exposed[key] = value
        }
    });
});

const form = reactive({
    id: '',
    projectId: '',
    time:'',
    year: '',
    month: '',
    income: '',
    cost: '',
    profit: ''
});

const rules = {
    time: [{ required: true, message: '年份/月度不能为空!', trigger: 'change' }],
    income: [{ required: true, message: '收入总金额不能为空!', trigger: 'blur' }],
    cost: [{ required: true, message: '成本总金额不能为空!', trigger: 'blur' }],
    profit: [{ required: true, message: '利润总金额不能为空!', trigger: 'blur' }],
}

/**
 * 选择时间
 */
const datePickerChange = (e) => {
    form.year = '';
    form.month = '';
    if(e){
        form.year = e.split('-')[0];
        form.month = parseInt(e.split('-')[1]);
    }
}

// 暴露方法出去
defineExpose({ ...instance.exposed,form});
</script>

<style scoped>

</style>
